<template>
	<view class="container">
		<!-- 店铺信息 -->
		<view class="shop-info">
			<view class="shop-header">
				<text class="shop-label">当前门店：</text>
				<text class="shop-name">{{ shopInfo.agent_config ? shopInfo.agent_config.name : '店铺名称' }}</text>
			</view>
			<view class="shop-address">
				<text>{{ shopInfo.agent_config ? shopInfo.agent_config.address : '店铺地址' }}</text>
			</view>
			<view class="contact-buttons">
				<view class="contact-btn" @tap="openNavigation">
					<text class="contact-icon">📍</text>
				</view>
				<view class="contact-btn" @tap="callStore">
					<text class="contact-icon">📞</text>
				</view>
			</view>
		</view>

		<!-- 房间信息卡片 -->
		<view class="room-card">
			<view class="room-content">
				<image class="room-image" :src="getRoomImageUrl()" mode="aspectFill" @error="onImageError"></image>
				<view class="room-details">
					<text class="room-name">{{ getRoomName() }}</text>
					<text class="room-duration">{{ getPackageInfo() }}</text>
					<view class="room-quantity">
						<text class="quantity-label">数量</text>
						<text class="quantity-value">{{ getQuantity() }}份</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 时间选择 -->
		<view class="time-section">
			<view class="time-row">
				<text class="time-label">开始时间</text>
				<text class="time-value">{{ formatDisplayDate(getStartDate()) }} {{ getStartTime() }}</text>
				<text class="time-arrow">></text>
			</view>
			<view class="time-row">
				<text class="time-label">结束时间</text>
				<text class="time-value">{{ formatDisplayDate(getEndDate()) }} {{ getEndTime() }}</text>
				<text class="time-arrow">></text>
			</view>
		</view>

		<!-- 时间段可视化 -->
		<view class="time-slots-section" v-if="timeSlots && timeSlots.length > 0">
			<view class="slots-container">
				<view class="slots-row">
					<view
						v-for="(slot, index) in timeSlots"
						:key="index"
						class="slot-item"
						:class="{
							'slot-selected': slot.isSelected,
							'slot-unavailable': slot.isUnavailable,
							'slot-available': !slot.isSelected && !slot.isUnavailable
						}"
					></view>
				</view>
			</view>

			<view class="slots-container" style="margin-bottom: 20rpx; font-size: 20rpx">
				<view class="slots-row">
					<view v-for="(slot, index) in timeSlots" :key="index" class="slot-item">{{ slot.hours }}</view>
				</view>
			</view>

			<view class="legend">
				<view class="legend-item">
					<view class="legend-color legend-unavailable"></view>
					<text class="legend-text">不可预定时段</text>
				</view>
				<view class="legend-item">
					<view class="legend-color legend-available"></view>
					<text class="legend-text">可预定时段</text>
				</view>
				<view class="legend-item">
					<view class="legend-color legend-selected"></view>
					<text class="legend-text">当前预定时段</text>
				</view>
			</view>
		</view>

		<!-- 优惠券选择 - 修改为弹窗触发 -->
		<view class="coupon-section" @tap="showCouponModal">
			<view class="coupon-row">
				<view class="coupon-left">
					<view class="coupon-icon">🎫</view>
					<text class="coupon-label">优惠券</text>
				</view>
				<view class="coupon-right">
					<text class="coupon-count">{{ availableCoupons.length }} 张可用</text>
					<text class="coupon-arrow">></text>
				</view>
			</view>
			<view v-if="selectedCoupon" class="selected-coupon">
				<text class="selected-coupon-text">已选择：{{ selectedCoupon.name }} -¥{{ getCouponDiscount() }}</text>
			</view>
		</view>

		<!-- 支付方式选择 -->
		<view class="payment-method-section">
			<view class="payment-header">
				<text class="payment-title">支付方式</text>
			</view>
			<view class="payment-list">
				<!-- 微信支付 -->
				<view class="payment-item" :class="selectedPayment === 'wechat' ? 'payment-active' : ''" @tap="selectPayment('wechat')">
					<view class="payment-content">
						<view class="payment-left">
							<view class="payment-icon wechat-icon">💳</view>
							<text class="payment-name">微信支付</text>
						</view>
						<view class="payment-radio">
							<view class="radio-btn" :class="selectedPayment === 'wechat' ? 'radio-active' : ''">
								<text v-if="selectedPayment === 'wechat'" class="radio-check">✓</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 余额支付 -->
				<view
					class="payment-item"
					:class="[selectedPayment === 'balance' ? 'payment-active' : '', userBalance <= 0 ? 'payment-disabled' : '']"
					@tap="selectPayment('balance')"
				>
					<view class="payment-content">
						<view class="payment-left">
							<view class="payment-icon balance-icon">💰</view>
							<view class="payment-info">
								<text class="payment-name">余额支付</text>
								<text class="balance-amount">可用余额：¥{{ userBalance.toFixed(2) }}</text>
							</view>
						</view>
						<view class="payment-radio">
							<view class="radio-btn" :class="selectedPayment === 'balance' ? 'radio-active' : ''">
								<text v-if="selectedPayment === 'balance'" class="radio-check">✓</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 余额不足提示 -->
			<view v-if="selectedPayment === 'balance' && userBalance < finalAmount" class="balance-insufficient">
				<text class="insufficient-text">余额不足，请选择其他支付方式或充值</text>
			</view>
		</view>

		<!-- 订单总额 -->
		<view class="order-summary">
			<view class="summary-row">
				<text class="summary-label">订单总额</text>
				<text class="summary-value">小计 ¥{{ totalAmount.toFixed(2) }}</text>
			</view>
			<view v-if="selectedCoupon" class="summary-row">
				<text class="summary-label">优惠券</text>
				<text class="summary-discount">-¥{{ getCouponDiscount() }}</text>
			</view>
		</view>

		<!-- 预约须知 -->
		<view class="notice-section">
			<view class="notice-header">
				<text class="notice-title">【预约须知】</text>
			</view>
			<view class="notice-content">
				<text class="notice-text">
					根据行业政策，{{ formatDisplayDate(getStartDate()) }} {{ getStartTime() }}:00前可取消预约订单和续时订单，逾期不可取消订单，如未到店，将正常扣除订单费用。
				</text>
			</view>
		</view>

		<!-- 底部支付栏 -->
		<view class="bottom-payment">
			<view class="payment-info">
				<text class="payment-label">应支付</text>
				<text class="payment-amount">¥{{ finalAmount.toFixed(2) }}</text>
				<text v-if="selectedCoupon" class="payment-total">原价：¥{{ totalAmount.toFixed(2) }}</text>
			</view>
			<button class="payment-btn" @tap="confirmPayment" :disabled="isCreatingOrder || !selectedPayment || (selectedPayment === 'balance' && userBalance < finalAmount)">
				{{ isCreatingOrder ? '处理中...' : '确认支付' }}
			</button>
		</view>

		<!-- 优惠券选择弹窗 -->
		<view v-if="showCouponPopup" class="modal-overlay" @tap="closeCouponModal">
			<view class="coupon-modal" @tap.stop>
				<!-- 弹窗头部 -->
				<view class="modal-header">
					<text class="modal-title">选择优惠券</text>
					<text class="modal-close" @tap="closeCouponModal">×</text>
				</view>

				<!-- 优惠券列表 -->
				<scroll-view class="coupon-list" scroll-y="true">
					<!-- 不使用优惠券选项 -->
					<view class="coupon-item no-coupon" :class="!tempSelectedCoupon ? 'coupon-selected' : ''" @tap="selectTempCoupon(null)">
						<view class="coupon-content">
							<view class="coupon-left">
								<view class="coupon-icon">🚫</view>
								<view class="coupon-info">
									<text class="coupon-name">不使用优惠券</text>
									<text class="coupon-desc">直接使用原价支付</text>
								</view>
							</view>
							<view class="coupon-right">
								<view class="radio-btn" :class="!tempSelectedCoupon ? 'radio-active' : ''">
									<text v-if="!tempSelectedCoupon" class="radio-check">✓</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 优惠券列表 -->
					<view
						v-for="(couponItem, index) in availableCoupons"
						:key="index"
						class="coupon-item"
						:class="{
							'coupon-selected': tempSelectedCoupon && tempSelectedCoupon.id === couponItem.id,
							'coupon-disabled': !isCouponAvailable(couponItem)
						}"
						@tap="selectTempCoupon(couponItem)"
					>
						<view class="coupon-content">
							<view class="coupon-left">
								<view class="coupon-amount">
									<text class="amount-symbol">¥</text>
									<text class="amount-value">{{ couponItem.discount || couponItem.amount || 0 }}</text>
								</view>
								<view class="coupon-info">
									<text class="coupon-name">{{ couponItem.name || '优惠券' }}</text>
									<text class="coupon-desc">满{{ couponItem.min_amount || couponItem.min_consumption || 0 }}可用</text>
									<text class="coupon-validity" v-if="couponItem.expire_time">有效期至：{{ formatDate(couponItem.expire_time) }}</text>
								</view>
							</view>
							<view class="coupon-right">
								<view
									v-if="isCouponAvailable(couponItem)"
									class="radio-btn"
									:class="tempSelectedCoupon && tempSelectedCoupon.id === couponItem.id ? 'radio-active' : ''"
								>
									<text v-if="tempSelectedCoupon && tempSelectedCoupon.id === couponItem.id" class="radio-check">✓</text>
								</view>
								<view v-else class="unavailable-tag">
									<text class="unavailable-text">不可用</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 空状态 -->
					<view class="empty-state" v-if="availableCoupons.length === 0 && !isCouponLoading">
						<view class="empty-icon">🎫</view>
						<text class="empty-text">暂无可用优惠券</text>
						<text class="empty-desc">快去获取更多优惠券吧</text>
					</view>

					<!-- 加载状态 -->
					<view class="loading-state" v-if="isCouponLoading">
						<text class="loading-text">加载中...</text>
					</view>
				</scroll-view>

				<!-- 弹窗底部 -->
				<view class="modal-footer">
					<view class="price-info">
						<text class="original-price">订单金额：¥{{ totalAmount.toFixed(2) }}</text>
						<text v-if="tempSelectedCoupon" class="final-price">优惠后：¥{{ getTempFinalPrice().toFixed(2) }}</text>
					</view>
					<button class="confirm-btn" @tap="confirmCouponSelection">确认选择</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
import { mapGetters, mapState, mapMutations } from 'vuex';

export default {
	data() {
		return {
			// 店铺和房间ID
			shopId: '',
			roomId: '',

			// 订单数据 - 修复：添加完整的订单数据结构
			orderData: {
				roomId: '',
				packageId: '',
				startDate: '',
				startTime: '',
				endDate: '',
				endTime: '',
				duration: 0,
				quantity: 1
			},

			// 时间段数据 - 修复：添加时间段数据
			timeSlots: [],

			// 店铺信息
			shopInfo: {
				agent_config: {
					name: '',
					address: '',
					shop_phone: '',
					lat: '',
					lng: '',
					title: ''
				}
			},

			// 房间信息
			roomInfo: {
				name: '',
				image: '',
				packageName: '',
				duration: '',
				description: ''
			},

			// 价格相关 - 修复：添加价格数据
			totalAmount: 0,

			// 优惠券相关
			availableCoupons: [],
			selectedCoupon: null,
			tempSelectedCoupon: null, // 弹窗中临时选择的优惠券
			showCouponPopup: false,
			isCouponLoading: false,

			// 支付方式
			selectedPayment: 'wechat',
			userBalance: 0,

			// 状态
			isCreatingOrder: false,
			isPageInitialized: false,

			// 默认图片
			defaultRoomImage: '/static/images/default-room.jpg'
		};
	},

	computed: {
		// 使用mapGetters获取全局状态
		...mapGetters(['getGaodeKey', 'getSiteName', 'getLocation']),

		// 使用mapState直接访问state
		...mapState({
			globalConfig: (state) => state.config,
			userLocation: (state) => state.location,
			// 修复：添加 settlementData 的映射
			settlementData: (state) => state.settlementData || {}
		}),

		// 修复：添加 finalAmount 计算属性
		finalAmount() {
			let amount = this.totalAmount;

			if (this.selectedCoupon) {
				const discount = parseFloat(this.selectedCoupon.discount || this.selectedCoupon.amount || 0);
				amount = Math.max(0, amount - discount);
			}

			return Math.max(0, amount);
		}
	},

	onLoad(options) {
		console.log('接收到的参数:', options);

		// 解析传入的订单数据 - 修复：确保 orderData 正确初始化
		if (options.orderData) {
			try {
				const parsedOrderData = JSON.parse(decodeURIComponent(options.orderData));
				this.orderData = {
					...this.orderData,
					...parsedOrderData
				};
			} catch (e) {
				console.error('解析订单数据失败:', e);
			}
		}

		if (options.timeSlots) {
			try {
				this.timeSlots = JSON.parse(decodeURIComponent(options.timeSlots));
			} catch (e) {
				console.error('解析数据可视化失败:', e);
			}
		}
		console.log(this.timeSlots, 'this.timeSlots');

		// 解析其他参数 - 修复数据结构
		this.roomId = options.roomId || this.orderData.roomId || '';
		this.shopId = options.shopId || '';

		// 修复：确保 packageId 正确赋值
		if (options.packageId) {
			this.orderData.packageId = options.packageId;
		}

		// 修复：确保 totalAmount 正确赋值
		if (options.totalPrice) {
			this.totalAmount = parseFloat(options.totalPrice) || 0;
		}

		this.initPage();
	},

	methods: {
		// 映射 Vuex mutations
		...mapMutations(['setSelectedCoupon', 'setSettlementPageState', 'clearSettlementPageState']),

		// 获取房间图片URL
		getRoomImageUrl() {
			const baseUrl = this.globalConfig?.site_url || '';
			const imageUrl = this.roomInfo?.image || this.settlementData?.roomInfo?.image || '';

			if (!imageUrl) {
				return this.defaultRoomImage;
			}

			if (imageUrl.startsWith('http')) {
				return imageUrl;
			}

			return baseUrl + imageUrl;
		},

		// 图片加载失败处理
		onImageError() {
			console.log('房间图片加载失败，使用默认图片');
		},

		// 获取房间名称
		getRoomName() {
			return this.roomInfo?.name || this.settlementData?.roomInfo?.name || '房间名称';
		},

		// 获取套餐信息
		getPackageInfo() {
			const packageName = this.roomInfo?.packageName || this.settlementData?.selectedPackage?.name || this.settlementData?.roomInfo?.packageName || '套餐';
			const duration = this.getDuration();
			return `${packageName} ${duration}小时`;
		},

		// 获取数量
		getQuantity() {
			return this.orderData?.quantity || this.settlementData?.selectedQuantity || 1;
		},

		// 获取开始日期
		getStartDate() {
			return this.orderData?.startDate || this.settlementData?.selectedDate || '';
		},

		// 获取开始时间
		getStartTime() {
			return this.orderData?.startTime || this.settlementData?.startTime || '';
		},

		// 获取结束日期
		getEndDate() {
			return this.orderData?.endDate || this.settlementData?.endDate || this.getStartDate();
		},

		// 获取结束时间
		getEndTime() {
			return this.orderData?.endTime || this.settlementData?.endTime || this.getStartTime();
		},

		// 获取时长
		getDuration() {
			return this.orderData?.duration || this.settlementData?.totalHours || 0;
		},

		// 获取优惠券折扣金额
		getCouponDiscount() {
			if (!this.selectedCoupon) return '0.00';
			const discount = parseFloat(this.selectedCoupon.discount || this.selectedCoupon.amount || 0);
			return discount.toFixed(2);
		},

		// 格式化显示日期
		formatDisplayDate(dateStr) {
			if (!dateStr) return '';

			if (dateStr.includes('-') && dateStr.split('-').length === 2) {
				return dateStr;
			}

			if (dateStr.includes('-') && dateStr.split('-').length === 3) {
				const parts = dateStr.split('-');
				return `${parts[1]}-${parts[2]}`;
			}

			return dateStr;
		},

		// 格式化日期
		formatDate(timestamp) {
			if (!timestamp) return '';

			let date;
			if (typeof timestamp === 'string') {
				date = new Date(timestamp);
			} else {
				date = new Date(timestamp * 1000); // 假设是时间戳
			}

			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');

			return `${year}-${month}-${day}`;
		},

		// 显示优惠券弹窗
		showCouponModal() {
			console.log('显示优惠券弹窗');
			this.tempSelectedCoupon = this.selectedCoupon; // 设置临时选择
			this.showCouponPopup = true;

			// 如果还没有加载优惠券，现在加载
			if (this.availableCoupons.length === 0) {
				this.loadAvailableCoupons();
			}
		},

		// 关闭优惠券弹窗
		closeCouponModal() {
			console.log('关闭优惠券弹窗');
			this.showCouponPopup = false;
			this.tempSelectedCoupon = null;
		},

		// 在弹窗中选择优惠券
		selectTempCoupon(couponItem) {
			console.log('临时选择优惠券:', couponItem);

			if (couponItem && !this.isCouponAvailable(couponItem)) {
				uni.showToast({
					title: '该优惠券不可用',
					icon: 'none'
				});
				return;
			}

			// 检查是否是取消选择
			if (this.tempSelectedCoupon && couponItem && this.tempSelectedCoupon.id === couponItem.id) {
				console.log('取消选择优惠券');
				this.tempSelectedCoupon = null;
			} else {
				this.tempSelectedCoupon = couponItem;
				console.log('已临时选择优惠券:', this.tempSelectedCoupon);
			}
		},

		// 确认优惠券选择
		confirmCouponSelection() {
			console.log('确认优惠券选择:', this.tempSelectedCoupon);
			this.selectedCoupon = this.tempSelectedCoupon;

			// 更新到 Vuex
			this.setSelectedCoupon(this.selectedCoupon);

			this.closeCouponModal();

			uni.showToast({
				title: this.selectedCoupon ? '优惠券选择成功' : '已取消优惠券',
				icon: 'success',
				duration: 1500
			});
		},

		// 获取临时选择的最终价格
		getTempFinalPrice() {
			let amount = this.totalAmount;

			if (this.tempSelectedCoupon) {
				const discount = parseFloat(this.tempSelectedCoupon.discount || this.tempSelectedCoupon.amount || 0);
				amount = Math.max(0, amount - discount);
			}

			return Math.max(0, amount);
		},

		// 判断优惠券是否可用
		isCouponAvailable(couponItem) {
			if (!couponItem) return false;

			// 检查优惠券状态
			if (couponItem.status && couponItem.status !== '1' && couponItem.status !== 1) {
				return false;
			}

			// 检查最低消费金额
			const minAmount = parseFloat(couponItem.min_amount || couponItem.min_consumption || 0);
			if (minAmount > 0 && this.totalAmount < minAmount) {
				return false;
			}

			// 检查有效期
			if (couponItem.expire_time) {
				let expireTime;
				if (typeof couponItem.expire_time === 'string') {
					expireTime = new Date(couponItem.expire_time);
				} else {
					expireTime = new Date(couponItem.expire_time * 1000);
				}

				const now = new Date();
				if (expireTime < now) {
					return false;
				}
			}

			return true;
		},

		// 加载可用优惠券
		async loadAvailableCoupons() {
			if (this.isCouponLoading) return;

			this.isCouponLoading = true;

			try {
				const opts = {
					url: `/api/shop/getUserCouponByRoom?room_id=${this.roomId}`,
					method: 'get'
				};

				const res = await request.httpTokenRequest(opts);
				console.log('获取优惠券列表响应:', res);

				if (res && res.data && res.data.code == 1) {
					const coupons = res.data.data || [];

					// 转换数据格式以兼容现有逻辑
					this.availableCoupons = coupons.map((couponItem) => ({
						id: couponItem.id,
						coupon_id: couponItem.coupon_id,
						name: this.getCouponName(couponItem),
						discount: couponItem.coupon.amount,
						amount: couponItem.coupon.amount,
						min_amount: couponItem.coupon.min_consumption,
						expire_time: couponItem.coupon.end_time,
						status: couponItem.status,
						originalData: couponItem
					}));

					console.log('处理后的优惠券列表:', this.availableCoupons);
				} else {
					console.error('获取优惠券失败:', res.data?.msg);
				}
			} catch (error) {
				console.error('获取优惠券列表失败:', error);
			} finally {
				this.isCouponLoading = false;
			}
		},

		// 获取优惠券名称
		getCouponName(couponItem) {
			if (couponItem.room_name) {
				try {
					const roomNames = JSON.parse(couponItem.room_name);
					if (Array.isArray(roomNames) && roomNames.length > 0) {
						return `${roomNames[0]}专用券`;
					}
				} catch (e) {
					console.error('解析房间名称失败:', e);
				}
			}
			return `${couponItem.coupon.amount}元优惠券`;
		},

		// 选择支付方式
		selectPayment(paymentType) {
			if (paymentType === 'balance' && this.userBalance <= 0) {
				uni.showToast({
					title: '余额不足，无法选择余额支付',
					icon: 'none'
				});
				return;
			}

			this.selectedPayment = paymentType;
			console.log('选择支付方式:', paymentType);
		},

		// 初始化页面
		async initPage() {
			if (this.isPageInitialized) {
				console.log('页面已初始化，跳过重复初始化');
				return;
			}

			console.log('开始初始化结算页面');

			try {
				await Promise.all([this.getRoomInfo(), this.getShopInfo(), this.getUserBalance(), this.loadAvailableCoupons()]);

				this.isPageInitialized = true;
				console.log('结算页面初始化完成');
			} catch (error) {
				console.error('初始化结算页面失败:', error);
				uni.showToast({
					title: '页面加载失败',
					icon: 'none'
				});
			}
		},

		// 获取房间信息
		async getRoomInfo() {
			if (this.settlementData?.roomInfo && Object.keys(this.settlementData.roomInfo).length > 0) {
				this.roomInfo = this.settlementData.roomInfo;
				console.log('使用 Vuex 中的房间信息:', this.roomInfo);
				return;
			}

			try {
				const opts = {
					url: `/api/shop/roomInfo?id=${this.roomId}&time=${this.getStartDate()}`,
					method: 'get'
				};

				const res = await request.httpRequest(opts);
				if (res && res.data && res.data.data && res.data.data.room_info) {
					const roomData = res.data.data.room_info;
					this.roomInfo = {
						name: roomData.name || '房间名称',
						image: roomData.images?.[0] || '',
						packageName: '套餐',
						duration: this.getDuration(),
						description: roomData.description || ''
					};
					console.log('从API获取房间信息:', this.roomInfo);
				}
			} catch (error) {
				console.error('获取房间信息失败:', error);
			}
		},

		// 获取店铺信息
		async getShopInfo() {
			try {
				const opts = {
					url: `/api/shop/shopInfo?id=${this.shopId}`,
					method: 'get'
				};

				uni.showLoading({
					title: '加载中'
				});
				const res = await request.httpRequest(opts);
				uni.hideLoading();

				console.log('店铺信息响应:', res);

				if (res && res.data && res.data.data) {
					this.shopInfo = {
						agent_config: {
							name: res.data.data.agent_config?.name || '店铺名称',
							address: res.data.data.agent_config?.address || '店铺地址',
							shop_phone: res.data.data.agent_config?.shop_phone || '',
							lat: res.data.data.agent_config?.lat || '',
							lng: res.data.data.agent_config?.long || res.data.data.agent_config?.longitude || '',
							title: res.data.data.agent_config?.title || '店铺'
						}
					};
				}
			} catch (error) {
				uni.hideLoading();
				console.error('获取店铺信息失败:', error);
				uni.showToast({
					title: '获取店铺信息失败',
					icon: 'none'
				});
			}
		},

		// 获取用户余额
		async getUserBalance() {
			try {
				console.log('开始获取用户余额...');
				
				// 方法1：尝试从用户信息中获取余额
				// const userInfo = uni.getStorageSync('user_info');
				// if (userInfo) {
				// 	try {
				// 		const parsedUserInfo = JSON.parse(userInfo);
				// 		if (parsedUserInfo.money !== undefined) {
				// 			this.userBalance = parseFloat(parsedUserInfo.money || 0);
				// 			console.log('从用户信息获取余额:', this.userBalance);
				// 			if (this.userBalance <= 0) {
				// 				this.selectedPayment = 'wechat';
				// 			}
				// 			return;
				// 		}
				// 	} catch (e) {
				// 		console.error('解析用户信息失败:', e);
				// 	}
				// }
				
				// 方法2：调用充值信息接口获取余额
				const rechargeOpts = {
					url: '/api/index/getRechargeInfo',
					method: 'get'
				};
				const rechargeRes = await request.httpTokenRequest(rechargeOpts);
				console.log('充值信息接口响应:', rechargeRes);
				
				if (rechargeRes && rechargeRes.data && rechargeRes.data.code == 1 && rechargeRes.data.data && rechargeRes.data.data.user_info) {
					const balance = parseFloat(rechargeRes.data.data.user_info.money || 0);
					this.userBalance = balance;
					console.log('从充值信息接口获取余额:', this.userBalance);

					if (this.userBalance <= 0) {
						this.selectedPayment = 'wechat';
						console.log('余额为0，切换到微信支付');
					}
					return;
				}
				
				// 方法3：调用余额接口（备用）
				const opts = {
					url: '/api/user/getBalance',
					method: 'get'
				};
				const res = await request.httpTokenRequest(opts);
				console.log('余额接口响应:', res);
				
				if (res && res.data && res.data.data) {
					const balance = parseFloat(res.data.data.balance || 0);
					this.userBalance = balance;
					console.log('从余额接口获取余额:', this.userBalance);

					if (this.userBalance <= 0) {
						this.selectedPayment = 'wechat';
						console.log('余额为0，切换到微信支付');
					}
				} else {
					console.error('余额接口返回数据格式错误:', res);
					this.userBalance = 0;
					this.selectedPayment = 'wechat';
				}
			} catch (err) {
				console.error('获取用户余额失败:', err);
				this.userBalance = 0;
				this.selectedPayment = 'wechat';
			}
		},

		// 拨打店铺电话
		callStore() {
			if (!this.shopInfo.agent_config || !this.shopInfo.agent_config.shop_phone) {
				uni.showToast({
					title: '店铺电话不存在',
					icon: 'none'
				});
				return;
			}

			uni.makePhoneCall({
				phoneNumber: this.shopInfo.agent_config.shop_phone,
				success: () => {
					console.log('拨打电话成功');
				},
				fail: (err) => {
					console.log('拨打电话失败', err);
					uni.showToast({
						title: '拨打电话失败',
						icon: 'none'
					});
				}
			});
		},

		// 导航功能
		openNavigation() {
			console.log('点击导航按钮', this.shopInfo);

			if (!this.shopInfo || !this.shopInfo.agent_config) {
				uni.showToast({
					title: '店铺信息未加载完成，请稍后重试',
					icon: 'none'
				});
				return;
			}

			const config = this.shopInfo.agent_config;
			let latitude = config.lat || config.latitude;
			let longitude = config.lng || config.long || config.longitude;

			if (!latitude || !longitude) {
				uni.showToast({
					title: '店铺位置信息不完整，无法导航',
					icon: 'none'
				});
				return;
			}

			latitude = parseFloat(latitude);
			longitude = parseFloat(longitude);

			if (isNaN(latitude) || isNaN(longitude)) {
				uni.showToast({
					title: '店铺坐标格式错误',
					icon: 'none'
				});
				return;
			}

			const locationData = {
				latitude: latitude,
				longitude: longitude,
				name: config.title || '店铺',
				address: config.address || '',
				scale: 18
			};

			console.log('准备打开地图:', locationData);

			uni.openLocation({
				...locationData,
				success: () => {
					console.log('打开地图成功');
				},
				fail: (error) => {
					console.error('打开地图失败:', error);
					uni.showToast({
						title: '打开地图失败',
						icon: 'none'
					});
				}
			});
		},

		// 验证订单数据
		validateOrderData() {
			if (!this.roomId) {
				uni.showToast({
					title: '房间信息缺失',
					icon: 'none'
				});
				return false;
			}

			if (!this.orderData.packageId) {
				uni.showToast({
					title: '套餐信息缺失',
					icon: 'none'
				});
				return false;
			}

			if (!this.orderData.startDate || !this.orderData.startTime) {
				uni.showToast({
					title: '开始时间缺失',
					icon: 'none'
				});
				return false;
			}

			return true;
		},

		// 格式化完整日期时间
		formatFullDateTime(date, time) {
			let fullDate = date;

			if (date && date.includes('-')) {
				const dateParts = date.split('-');
				if (dateParts.length === 2) {
					const currentYear = new Date().getFullYear();
					fullDate = `${currentYear}-${date}`;
				} else if (dateParts.length === 3 && dateParts[0].length === 2) {
					const currentYear = new Date().getFullYear();
					fullDate = `${currentYear}-${dateParts[0]}-${dateParts[1]}`;
				}
			} else {
				const now = new Date();
				fullDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
			}

			return `${fullDate} ${time}:00`;
		},

		// 计算结束日期时间
		calculateEndDateTime() {
			if (!this.orderData.startDate || !this.orderData.startTime || this.orderData.duration <= 0) {
				return this.formatFullDateTime(this.orderData.startDate, this.orderData.startTime);
			}

			let startDateStr = this.orderData.startDate;

			if (startDateStr.includes('-')) {
				const dateParts = startDateStr.split('-');
				if (dateParts.length === 2) {
					const currentYear = new Date().getFullYear();
					startDateStr = `${currentYear}-${dateParts[0]}-${dateParts[1]}`;
				}
			}

			const [startHour, startMinute] = this.orderData.startTime.split(':').map(Number);
			const startDate = new Date(startDateStr);
			startDate.setHours(startHour, startMinute, 0, 0);

			const endDate = new Date(startDate.getTime() + this.orderData.duration * 60 * 60 * 1000);

			const endYear = endDate.getFullYear();
			const endMonth = String(endDate.getMonth() + 1).padStart(2, '0');
			const endDay = String(endDate.getDate()).padStart(2, '0');
			const endHour = String(endDate.getHours()).padStart(2, '0');
			const endMinute = String(endDate.getMinutes()).padStart(2, '0');

			return `${endYear}-${endMonth}-${endDay} ${endHour}:${endMinute}:00`;
		},

		// 确认支付
		async confirmPayment() {
			if (this.isCreatingOrder) return;

			if (!this.selectedPayment) {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
				return;
			}

			if (this.selectedPayment === 'balance' && this.userBalance < this.finalAmount) {
				uni.showToast({
					title: '余额不足，请选择其他支付方式',
					icon: 'none'
				});
				return;
			}

			if (!this.validateOrderData()) {
				return;
			}

			this.isCreatingOrder = true;

			try {
				const orderResult = await this.createOrder();

				if (orderResult.success) {
					// 余额支付特殊处理
					if (this.selectedPayment === 'balance') {
						// 余额支付可能直接返回订单信息，不需要pay_data
						this.handlePaymentSuccess(orderResult.data);
					} else if (this.finalAmount > 0) {
						// 其他支付方式需要pay_data
						if (!orderResult.data) {
							uni.showToast({
								title: '支付数据异常，请联系客服',
								icon: 'none'
							});
							return;
						}
						this.goToPay(orderResult.data);
					} else {
						this.handlePaymentSuccess(orderResult.data);
					}
				} else {
					uni.showToast({
						title: orderResult.message || '创建订单失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('创建订单失败:', error);
				uni.showToast({
					title: '创建订单失败，请重试',
					icon: 'none'
				});
			} finally {
				this.isCreatingOrder = false;
			}
		},

		// 创建订单
		async createOrder() {
			const startDateTime = this.formatFullDateTime(this.orderData.startDate, this.orderData.startTime);
			const endDateTime = this.calculateEndDateTime();
			console.log(this.orderData, 'this.orderData');
			
			// 根据选择的支付方式设置pay_type
			let pay_type = '1'; // 默认微信支付
			if (this.selectedPayment === 'balance') {
				pay_type = '2'; // 余额支付
			} else if (this.selectedPayment === 'wechat') {
				pay_type = '1'; // 微信支付
			}
			
			const orderData = {
				room_id: this.roomId,
				room_package_id: String(this.orderData.packageId),
				start_time: startDateTime,
				end_time: endDateTime,
				pay_type: pay_type, // 使用动态设置的支付方式
				users_coupon_id: this.selectedCoupon ? this.selectedCoupon.id : '',
				num: String(this.orderData.quantity)
			};

			console.log('创建订单数据:', orderData);

			const opts = {
				url: '/api/order/createOrder',
				method: 'post',
				dataType: 'form-data',
				data: orderData
			};

			try {
				const res = await request.httpTokenRequest(opts);
				console.log('创建订单响应:', res);
				
				const result = JSON.parse(res.data);
				console.log('解析后的订单结果:', result);

				if (result.code === 1) {
					// 余额支付特殊处理
					if (this.selectedPayment === 'balance') {
						// 余额支付可能直接返回订单信息，不需要pay_data
						return {
							success: true,
							data: result.data || {}
						};
					}
					
					// 其他支付方式需要检查pay_data
					if (!result.data || !result.data.pay_data) {
						console.error('订单创建成功但pay_data为空:', result);
						return {
							success: false,
							message: '订单创建成功但支付数据异常，请联系客服'
						};
					}
					
					return {
						success: true,
						data: result.data.pay_data
					};
				} else {
					return {
						success: false,
						message: result.msg || '创建订单失败'
					};
				}
			} catch (error) {
				console.error('创建订单异常:', error);
				return {
					success: false,
					message: '创建订单失败，请重试'
				};
			}
		},

		// 跳转支付
		async goToPay(payData) {
			console.log('支付数据:', payData);

			try {
				// 如果是余额支付，直接处理成功
				if (this.selectedPayment === 'balance') {
					uni.showLoading({
						title: '余额支付中...'
					});
					
					// 模拟支付处理时间
					await new Promise(resolve => setTimeout(resolve, 1000));
					
					uni.hideLoading();
					this.handlePaymentSuccess({
						order_no: payData.order_no || payData.out_trade_no,
						id: payData.order_id
					});
					return;
				}

				uni.showLoading({
					title: '正在调起支付...'
				});

				if (payData.pay_type === 'wxpay') {
					await this.handleWechatPay(payData);
				} else {
					await this.handleWechatPay(payData);
				}
			} catch (error) {
				uni.hideLoading();
				console.error('支付失败:', error);
				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none'
				});
			}
		},

		// 微信支付处理
		async handleWechatPay(payData) {
			return new Promise((resolve, reject) => {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp || String(Date.now()),
					nonceStr: payData.nonceStr || payData.nonce_str,
					package: payData.package || payData.prepay_id,
					signType: payData.signType || 'MD5',
					paySign: payData.paySign || payData.sign,
					success: (res) => {
						uni.hideLoading();
						console.log('微信支付成功:', res);
						this.handlePaymentSuccess({
							order_no: payData.order_no || payData.out_trade_no,
							id: payData.order_id
						});
						resolve(res);
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('微信支付失败:', err);
						if (err.errMsg.includes('cancel')) {
							uni.showToast({
								title: '支付已取消',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: '支付失败: ' + err.errMsg,
								icon: 'none'
							});
						}
						reject(err);
					}
				});
			});
		},

		// 处理支付成功
		handlePaymentSuccess(orderData) {
			// 清除 Vuex 中的结算数据和页面状态
			this.$store.commit('clearSettlementData');
			this.$store.commit('clearOrderData');
			this.$store.commit('clearSelectedCoupon');
			this.clearSettlementPageState();

			uni.showToast({
				title: '支付成功！',
				icon: 'success',
				duration: 2000
			});

			setTimeout(() => {
				uni.showModal({
					title: '预约成功',
					content: `预约已确认！请按时到店享受服务。`,
					showCancel: false,
					confirmText: '查看订单',
					success: () => {
						uni.reLaunch({
							url: '/pages/index/tabbar?page=order'
						});
					}
				});
			}, 2000);
		},

		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style scoped>
/* 保持原有样式不变 */
page {
	background-color: #f5f5f5;
}

.container {
	min-height: 100vh;
	padding-bottom: 200rpx;
}

/* 店铺信息 */
.shop-info {
	background: linear-gradient(135deg, #4285f4 0%, #1976d2 100%);
	padding: 30rpx;
	color: #fff;
	position: relative;
}

.shop-header {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.shop-label {
	font-size: 28rpx;
	opacity: 0.9;
}

.shop-name {
	font-size: 32rpx;
	font-weight: 500;
	margin-left: 8rpx;
}

.shop-address {
	font-size: 28rpx;
	opacity: 0.8;
	margin-bottom: 20rpx;
}

.contact-buttons {
	position: absolute;
	right: 30rpx;
	top: 30rpx;
	display: flex;
	gap: 16rpx;
}

.contact-btn {
	width: 80rpx;
	height: 80rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.contact-btn:active {
	background-color: rgba(255, 255, 255, 0.3);
}

.contact-icon {
	font-size: 32rpx;
}

/* 房间卡片 */
.room-card {
	background-color: #fff;
	margin: 20rpx 30rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.room-content {
	display: flex;
	align-items: flex-start;
}

.room-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-right: 24rpx;
	background-color: #f5f5f5;
}

.room-details {
	flex: 1;
}

.room-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #4285f4;
	display: block;
	margin-bottom: 12rpx;
}

.room-duration {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 16rpx;
}

.room-quantity {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.quantity-label {
	font-size: 28rpx;
	color: #666;
}

.quantity-value {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
}

/* 时间选择 */
.time-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.time-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.time-row:last-child {
	border-bottom: none;
}

.time-label {
	font-size: 28rpx;
	color: #666;
}

.time-value {
	font-size: 28rpx;
	color: #4285f4;
	font-weight: 500;
}

.time-arrow {
	font-size: 24rpx;
	color: #ccc;
}

/* 时间段可视化 */
.time-slots-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.slots-container {
	margin-bottom: 20rpx;
}

.slots-row {
	display: flex;
	flex-wrap: wrap;
}

.slot-item {
	width: 3.1%;
	height: 32rpx;
	border-radius: 4rpx;
	margin-right: 1%;
	margin-bottom: 8rpx;
	font-size: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
}

.slot-selected {
	background-color: #ff6b6b;
	color: #fff;
}

.slot-unavailable {
	background-color: #4285f4;
	color: #fff;
}

.slot-available {
	background-color: #e0e0e0;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 30rpx;
}

.legend-item {
	display: flex;
	align-items: center;
}

.legend-color {
	width: 24rpx;
	height: 24rpx;
	border-radius: 4rpx;
	margin-right: 8rpx;
}

.legend-unavailable {
	background-color: #4285f4;
}

.legend-available {
	background-color: #e0e0e0;
}

.legend-selected {
	background-color: #ff6b6b;
}

.legend-text {
	font-size: 24rpx;
	color: #666;
}

/* 优惠券 */
.coupon-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.coupon-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.coupon-left {
	display: flex;
	align-items: center;
}

.coupon-icon {
	font-size: 32rpx;
	margin-right: 16rpx;
}

.coupon-label {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.coupon-right {
	display: flex;
	align-items: center;
}

.coupon-count {
	font-size: 28rpx;
	color: #666;
	margin-right: 16rpx;
}

.coupon-arrow {
	font-size: 28rpx;
	color: #999;
}

.selected-coupon {
	margin-top: 16rpx;
	padding: 16rpx;
	background-color: #f0f8ff;
	border-radius: 12rpx;
	border-left: 6rpx solid #007aff;
}

.selected-coupon-text {
	font-size: 28rpx;
	color: #007aff;
}

/* 支付方式 */
.payment-method-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.payment-header {
	margin-bottom: 30rpx;
}

.payment-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.payment-list {
	display: flex;
	flex-direction: column;
}

.payment-item {
	border: 2rpx solid #e0e0e0;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.payment-active {
	border-color: #007aff;
	border-width: 4rpx;
	background-color: #f0f8ff;
}

.payment-disabled {
	opacity: 0.5;
	background-color: #f5f5f5;
}

.payment-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.payment-left {
	flex: 1;
	display: flex;
	align-items: center;
}

.payment-icon {
	font-size: 40rpx;
	margin-right: 20rpx;
}

.wechat-icon {
	color: #09bb07;
}

.balance-icon {
	color: #ff9500;
}

.payment-info {
	flex: 1;
}

.payment-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.balance-amount {
	font-size: 28rpx;
	color: #666;
	display: block;
}

.payment-radio {
	display: flex;
	align-items: center;
}

.radio-btn {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #e0e0e0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	transition: all 0.3s ease;
}

.radio-active {
	border-color: #007aff;
	background-color: #007aff;
}

.radio-check {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
}

.balance-insufficient {
	margin-top: 20rpx;
	padding: 16rpx;
	background-color: #fff2f0;
	border-radius: 12rpx;
	border-left: 6rpx solid #ff4d4f;
}

.insufficient-text {
	font-size: 28rpx;
	color: #ff4d4f;
}

/* 订单总额 */
.order-summary {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.summary-row:last-child {
	margin-bottom: 0;
}

.summary-label {
	font-size: 28rpx;
	color: #333;
}

.summary-value {
	font-size: 28rpx;
	color: #4285f4;
	font-weight: 500;
}

.summary-discount {
	font-size: 28rpx;
	color: #ff6b6b;
	font-weight: 500;
}

/* 预约须知 */
.notice-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.notice-header {
	margin-bottom: 16rpx;
}

.notice-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
}

.notice-content {
	padding: 20rpx;
	background-color: #f8f9fa;
	border-radius: 12rpx;
}

.notice-text {
	font-size: 24rpx;
	color: #666;
	line-height: 1.6;
}

/* 底部支付栏 */
.bottom-payment {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 30rpx;
	border-top: 1rpx solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.payment-info {
	flex: 1;
}

.payment-label {
	font-size: 24rpx;
	color: #666;
	display: block;
}

.payment-amount {
	font-size: 40rpx;
	font-weight: bold;
	color: #ff6b6b;
	display: block;
	margin: 4rpx 0;
}

.payment-total {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.payment-btn {
	background-color: #4285f4;
	color: #fff;
	border: none;
	padding: 0 48rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
	min-width: 200rpx;
	transition: all 0.3s ease;
}

.payment-btn[disabled] {
	opacity: 0.6;
	background-color: #ccc;
}

/* 优惠券弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.coupon-modal {
	background-color: #fff;
	border-radius: 16rpx;
	width: 90%;
	max-width: 700rpx;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #e0e0e0;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.modal-close {
	font-size: 40rpx;
	color: #999;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.coupon-list {
	flex: 1;
	padding: 20rpx;
	max-height: 60vh;
}

.coupon-item {
	background-color: #fff;
	border: 2rpx solid #e0e0e0;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	position: relative;
	transition: all 0.3s ease;
}

.coupon-item.coupon-selected {
	border-color: #007aff;
	border-width: 4rpx;
	background-color: #f0f8ff;
}

.coupon-item.coupon-disabled {
	opacity: 0.5;
	background-color: #f8f8f8;
}

.coupon-item.no-coupon {
	border: 2rpx solid #e0e0e0;
}

.coupon-item.no-coupon.coupon-selected {
	border-color: #007aff;
	background-color: #f0f8ff;
}

.coupon-content {
	display: flex;
	align-items: center;
	padding: 30rpx;
}

.coupon-left {
	flex: 1;
	display: flex;
	align-items: center;
}

.coupon-amount {
	display: flex;
	align-items: baseline;
	margin-right: 30rpx;
	min-width: 120rpx;
}

.amount-symbol {
	font-size: 24rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.amount-value {
	font-size: 48rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.coupon-icon {
	font-size: 48rpx;
	margin-right: 30rpx;
}

.coupon-info {
	flex: 1;
}

.coupon-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.coupon-desc {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 8rpx;
}

.coupon-validity {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.coupon-right {
	display: flex;
	align-items: center;
}

.unavailable-tag {
	padding: 8rpx 16rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
}

.unavailable-text {
	font-size: 24rpx;
	color: #999;
}

.empty-state {
	text-align: center;
	padding: 80rpx 40rpx;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
	display: block;
}

.empty-text {
	font-size: 32rpx;
	color: #666;
	display: block;
	margin-bottom: 12rpx;
}

.empty-desc {
	font-size: 28rpx;
	color: #999;
	display: block;
}

.loading-state {
	text-align: center;
	padding: 40rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

.modal-footer {
	padding: 30rpx;
	border-top: 1rpx solid #e0e0e0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price-info {
	flex: 1;
}

.original-price {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 8rpx;
}

.final-price {
	font-size: 32rpx;
	color: #ff6b6b;
	font-weight: 500;
	display: block;
}

.confirm-btn {
	background-color: #007aff;
	color: #fff;
	border: none;
	padding: 0 40rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: 500;
	min-width: 160rpx;
}
</style>
